import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
import { WapHomeO, CartCircle , HotO, UserO } from '@react-vant/icons';


const Layout = React.lazy(() => import('../layout'))
const Home = React.lazy(() => import('../views/home'))
const Classify = React.lazy(() => import('../views/classify'))
const Car = React.lazy(() => import('../views/car'))
const My = React.lazy(() => import('../views/my'))
const Detail = React.lazy(() => import('../views/detail'))
const Login = React.lazy(() => import('../views/login'))


export const routes_list_children = [{
  path: '/',
  element: <Home></Home>,
  meta: {
    title: '首页',
    icon: <WapHomeO  />
  }
}, {
  path: '/classify',
  element: <Classify></Classify>,
  meta: {
    title: '分类',
    icon: <HotO  />
  }
}, {
  path: '/car',
  element: <Car></Car>,
  meta: {
    title: '购物车',
    icon: <CartCircle  />
  }
}, {
  path: '/my',
  element: <My></My>,
  meta: {
    title: '我的',
    icon: <UserO  />
  }
}]

export const routes_list = [{
  path: '/',
  element: <Layout></Layout>,
  children: routes_list_children
}, {
  path: '/detail/:id',
  element: <Detail></Detail>
},{
  path: '/login',
  element: <Login></Login>
}]


const Router = () => {
  const RouterView = () => useRoutes(routes_list);
  return <Suspense fallback="路由加载中...">
    <RouterView></RouterView>
  </Suspense>
}

export default Router